// * 1. 初始化内容
// 1.1 选择需要裁剪的图片
const $image = $('#cropper-img')
// 1.2 配置裁剪规则
const options = {
  // 裁剪比例
  aspectRatio: 1,
  // 预览效果
  preview: '.big-img, .small-img'
}
// 1.3 应用裁剪效果
$image.cropper(options)

// *2. 选择图片【触发文件选择框的点击】
$('#select-file').on('click', function () {
  $('#file-input').trigger('click')
})

$('#file-input').on('change', function () {
  // 1. 获取选择的图片内容
  const file = this.files[0]
  // 2. 设置为裁剪图片【将裁剪图片的src改为选择的图片】
  const url = window.URL.createObjectURL(file)
  $image.prop('src', url)
  // 3. 重新加载裁剪效果
  $image.cropper('destroy').cropper(options)
})

// *3. 上传头像
const layer = layui.layer
$('#upload-avatar').on('click', function () {
  // 3.1 获取裁剪后的头像信息【URL资源地址（base64）】
  const avatar =  $image.cropper('getCroppedCanvas', { width: 64, height: 64 }).toDataURL('image/png')
  // 3.2 发送网络请求
  $.post('https://zhi.zeng.pub/big-event/my/update/avatar', { avatar }).then(res => {
    // 3.3 处理成功结果
    if (res.code !== 200) return layer.msg('修改头像失败')

    layer.msg('修改头像成功')
    // 3.4 重新加载用户信息【更新头像】【子级调用父级方法】
    window.parent.initUserInfo()
  })
})
